<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jPyKondo</title>
		<link type="text/css" href="lib/jQuery/jQueryUi/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
		<link type="text/css" href="lib/jQuery/jQueryUi/base.css" rel="stylesheet" />	
		<script type="text/javascript" src="lib/jQuery/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="lib/jQuery/jquery-ui-1.8.6.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$( "#tabs" ).tabs();
				$.ajax({ 
					url: "/ki_listmotions", 
					dataType : 'json',
					success: function(data){
						$('dl#ki_list_motions dd').remove();
						jQuery.each(data,function(k,v){
							$('<dd id="motion_'+k+'"  ><span class="motion_number">'+k+'</span><span class="motion_name"><a href="#">' + v + '</span></a></dd>').appendTo('dl#ki_list_motions').click(function(){
								$("#ajax_return").html("running motion : " +k + " " + v);
								$.ajax({ 
									url: "/ki_runmotion_"+k, 
									dataType : 'json',
									success: function(data){
										$("#ajax_return").html('motion : '+data.motion+' '+data.time);
									}
								});	
							}); 
						});
						//$(this)
					}
				});
				function loop_status() { 
					$.ajax({ 
						url: "/ki_status", 
						dataType : 'json',
						success: function(data){
							$("#ki_battery_level").empty().html(data.connected?data.battery_level:"-");
							$("#ki_connected").empty().html(data.connected?"on":"off");
							
							setTimeout(loop_status, 5*1000)
							
						}
					}); 
				}
				loop_status();
			});
		</script>
		<style>
		.motion_number{
			width:30px;
			align:right;
			float:left;
		}
		.motion_name{
		}
		#ki_list_motions{
			width:300px;
			height:380px;
			overflow:scroll;
		}
		#ajax_return {
			float:left;
			padding-left:10px;
			width:400px;
			height:400px;
		}

		</style>
	</head>
	<body>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Motions</a></li>
				<li><a href="#tabs-2">debug</a></li>
			</ul>
			<div id="tabs-1" style="height:400px;" >
				<div class="left-nav">
					<dl id="ki_list_motions" class="demos-nav">
					</dl>
				</div>
				<div id="ajax_return" >
				</div>
				<div> id="status">
					Connected : <span id="ki_connected"></span></br>
					Battery level : <span id="ki_battery_level"></span>
				</div>
			</div>
			<div id="tabs-2" style="height:400px;">
				<p></p>
			</div>

		</div>

	</body>
</html>